{% from "devhub/includes/macros.html" import tip, empty_unless %}

{% csrf_token %}

{% set editable = (context == 'edit' and editable) or context == 'submit' %}

<div class="item">
  <div class="item_wrapper">
    <table>
      <caption>{{ _('Add-on Media for {0}')|format_html(addon.name) }}</caption>
      <tbody>
        <tr>
          {% if context == 'edit' %}
          <th>
            {{ tip(_("Add-on icon"),
                   _("Upload an icon for your add-on or choose from one of ours. The "
                     "icon is displayed nearly everywhere your add-on is. Uploaded images "
                     "must be one of the following image types: .png, .jpg. "
                     "It is only relevant for listed add-ons.")) }}
          </th>
          {% endif %}
          <td>
          {% if context == 'submit' %}
            <label>
              {% trans -%}
                Select an icon for your add-on:
              {%- endtrans %}
            </label>
            {% endif %}
            {% if editable %}
              <div id="icon_preview">
                <div class="icon_preview" id="icon_preview_32">
                  <img src="{{ addon.get_icon_url(32) }}" alt="">
                </div>
                <div class="edit-media-details">
                  {# L10n: The size of the icon #}
                  {{ _('32x32px') }}
                  {{ tip(None,
                         _("Used in listings of add-ons, like search results.")) }}
                </div>

                <div class="icon_preview" id="icon_preview_64">
                  <img src="{{ addon.get_icon_url(64) }}" alt="">
                </div>
                <div class="edit-media-details">
                  {# L10n: The size of the icon #}
                  {{ _('64x64px') }}
                  {{ tip(None, _("Used in add-on detail pages.")) }}
                </div>

                <div class="icon_preview" id="icon_preview_128">
                  <img src="{{ addon.get_icon_url(128) }}" alt="">
                </div>
                <div class="edit-media-details">
                  {# L10n: The size of the icon #}
                  {{ _('128x128px') }}
                  {{ tip(None, _("Will be the standard in future add-on detail pages.")) }}
                </div>
              </div>
              <ul id="icons_default">
                {{ main_form.icon_type }}
              </ul>
              <div class="invisible-upload">
                <a class="button" href="#">{{ _('Upload a Custom Icon...') }}</a>
                <input type="file" id="id_icon_upload" name="icon_upload"
                       data-allowed-types="{{ supported_image_types }}"
                       data-upload-url="{{ url('devhub.addons.upload_icon', addon.slug) }}">
              </div>
              <div class="js-hidden">
                {{ main_form.icon_upload_hash }}
              </div>
              <div class="edit-media-details">
                {{ _('PNG and JPG supported.') }}
                {% if waffle.switch('content-optimization') %}
                  {{ _('Icons must be square and a minimum size of 128x128 pixels.') }}
                {% endif %}
                {{ _('Icons will be resized to 128x128 pixels if larger.') }}
              </div>
              <ul class="errorlist">
                <li id="edit-icon-error"></li>
              </ul>
            {% else %}
              <div id="icon_preview_readonly">
                  <img src="{{ addon.get_icon_url(128) }}" alt="">
                  <img src="{{ addon.get_icon_url(64) }}" alt="">
                  <img src="{{ addon.get_icon_url(32) }}" alt="">
              </div>
            {% endif %}
          </td>
        </tr>
        <tr>
          {% if context == 'edit' %}
          <th>
            <label>{{ _("Screenshots") }}</label>
          </th>
          {% endif %}
          <td class="edit-previews-readonly">
            {% if context == 'submit' %}
            <label>
              {% trans %}
                Please provide at least one screen shot of your add-on:
              {% endtrans %}
            </label>
            {% endif %}

            <div {{ 'class="edit-previews-submit"' if context == 'submit' else '' }}>
            {% if editable %}
              {% if preview_form %}
                {{ preview_form.management_form }}
                {{ preview_form.non_form_errors() }}
                <div id="file-list">
                  {% for form in preview_form.forms %}
                    <div class="preview">
                      <span class="handle">&nbsp;</span>
                      {% if form.instance.id %}
                        <div class="preview-thumb" style="background-image:url({{ form.instance.thumbnail_url }})">
                        </div>
                      {% else %}
                        <div class="preview-thumb"></div>
                      {% endif %}
                      {{ form.id }}
                      <span class="js-hidden delete">{{ form.DELETE }}{{ form.DELETE.label_tag() }}</span>
                      <div class="edit-previews-text">
                        <label data-for="{{ form.prefix }}-{{ form.caption.name }}" class="above-the-field">
                          {{ _('Please provide a caption for this screenshot:') }}
                        </label>
                        {{ form.caption }}
                        <a href="#" class="remove">x</a>
                      </div>
                      <div class="js-hidden position">
                        {{ form.position }}
                      </div>
                      <div class="preview_extra">
                        {{ form.upload_hash }}
                      </div>
                      {{ form.errors }}
                    </div>
                  {% endfor %}
                </div>
                <div class="invisible-upload">
                  <a class="button" href="#">{{ _('Add a Screenshot...') }}</a>
                  <input type="file" id="screenshot_upload" name="uploads" multiple
                         data-allowed-types="{{ supported_image_types }}"
                         data-upload-url="{{ url('devhub.addons.upload_preview', addon.slug) }}">

                </div>
                <div class="edit-media-details">
                  {% trans %}
                    PNG and JPG supported, PNG recommended. The maximum and recommended size for screenshots is
                    2400x1800 pixels.
                  {% endtrans %}
                  {% if waffle.switch('content-optimization') %}
                    {{ _('Minimum size is 1000x750, and a ratio of 4:3 is required.') }}
                  {% endif %}
                  {% trans %}
                    Having screenshots in your product page greatly increases its chances of
                    being installed.
                  {% endtrans %}
                </div>
              {% endif %}
            {% else %}
              {% for preview in addon.previews.all() %}
              <div class="preview-thumb" data-url="{{ preview.thumbnail_url }}" style="background-image:url({{ preview.thumbnail_url }})"></div>
              {% endfor %}
            {% endif %}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  {% if editable and context == 'edit' %}
  <div class="edit-media-button listing-footer">
    <button>{{ _('Save Changes') }}</button> {{ _('or') }}
      <a href="{{ url('devhub.addons.section', addon.slug, 'media') }}"
        class="addon-edit-cancel">
        {{ _('Cancel') }}</a>
    </div>
  {% elif context == 'submit' %}
  <div class="edit-media-button addon-submission-field">
    <button type="submit">
      {{ _('Continue') }}
    </button>
  </div>
  {% endif %}
</div>
